<template>
  <div class="home">
    <div class="main">
      <div class="left-main">
        <el-carousel :interval="3000" height="160px">
          <el-carousel-item  v-for="(it, index) in imgUrl" :key="index">
            <img :src="it.url" alt />
          </el-carousel-item>
        </el-carousel>
        <div class="footerBox">
          <div class="mainBox policy">
            <div class="header"><i class="iconfont iconziliao1"></i>行业动态</div>
            <ul>
              <li v-for="(i, index) in industryData" :key="index">
                <span>{{i.name}}</span>
                <span>{{i.date}}</span>
              </li>
            </ul>
          </div>
          <div class="mainBox policy">
            <div class="header"><i class="iconfont iconziliao1"></i>政策文档
            </div>
            <ul>
              <li v-for="(i, index) in policyData" :key="index">
                <span>{{i.name}}</span>
                <span>{{i.date}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="mainBox">
          <div class="header"><i class="iconfont iconziliao1"></i>流程中心</div>
          <div class="eltabs">
            <el-tabs v-model="tabs">
              <el-tab-pane name="todo">
                <span slot="label">待办<span class="bage">13</span></span>
                <ul>
                  <li v-for="(i,index) in proceData" :key="index">
                    <span>{{i.job}}</span>
                    <span>
                      <span>{{i.name}}</span>
                      <span>{{i.date}}</span>
                    </span>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane name="done">
                <span slot="label">已办</span>
                <ul>
                  <li v-for="(i,index) in doneData" :key="index">
                    <span>{{i.job}}</span>
                    <span>
                      <span>{{i.name}}</span>
                      <span>{{i.date}}</span>
                    </span>
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="dateBox">
          <div>{{new Date().getFullYear()}}</div>
          <div>{{new Date().getMonth() + 1}}月{{new Date().getDate()}}日 <span>周{{weekDate}}</span></div>
        </div>
        <div class="mainBox">
          <div class="echartBar"><div id="overall" style="width: 100%;height: 200px;"></div></div>
          <div class="echartBar"><div id="overall1" style="width: 100%;height: 200px;"></div></div>
        </div>
        <div class="mainBox noticeList">
          <el-tabs v-model="toolsVal">
            <el-tab-pane name="notice">
              <span slot="label">通知</span>
              <ul>
                <li v-for="(i,index) in noticeData" :key="index">
                  <span>{{i.job}}</span>
                  <span>{{i.date}}</span>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane name="message">
              <span slot="label">消息</span>
              <ul>
                <li v-for="(i,index) in messageData" :key="index">
                  <span>{{i.job}}</span>
                  <span>{{i.date}}</span>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane name="hanjian">
              <span slot="label">函件</span>
              <ul>
                <li v-for="(i,index) in letters" :key="index">
                  <span>{{i.job}}</span>
                  <span>{{i.date}}</span>
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="mainBox">
          <div class="header"><i class="iconfont iconziliao1"></i>常用工具</div>
          <div class="tools">
            <el-badge :value="12" class="item toolsBox">
              <i class="iconfont iconshoujianxiang"></i>
              <span>收件箱</span>
            </el-badge>
            <el-badge class="item toolsBox">
              <i class="iconfont iconpaper-airplane"></i>
              <span>发消息</span>
            </el-badge>
            <el-badge class="item toolsBox">
              <i class="iconfont iconwanglaihanjian"></i>
              <span>发函件</span>
            </el-badge>
            <el-badge class="item toolsBox">
              <i class="iconfont icontongzhi1"></i>
              <span>发通知</span>
            </el-badge>
          </div>
          <div class="tools">
            <div class="toolsBox"></div>
            <div class="toolsBox"></div>
            <div class="toolsBox"></div>
            <div class="toolsBox"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      tabs: 'todo',
      toolsVal: 'notice',
      imgUrl: [
        { url: '../../../static/img/cooperate.png' },
        { url: '../../../static/img/banner_1.jpg' },
        { url: '../../../static/img/banner_2.jpg' }
      ],
      proceData: [
        {
          'job': '发起工作周报流程（李小双）',
          'name': '张双',
          'date': '2019-08-11'
        },
        {
          'job': '产品销售合同-王勇-2019-12-03',
          'name': '王勇',
          'date': '2019-09-11'
        },
        {
          'job': '会议通知:555 会议时间:2019-12-03 17:00(GMT+08:00) 会议地点:317（中庭后侧）',
          'name': '李隆机',
          'date': '2018-09-11'
        },
        {
          'job': '出差外出申请-吴璇-2019-11-05',
          'name': '吴璇',
          'date': '2019-10-11'
        },
        {
          'job': '会议通知:部门会(全体必须参加) 会议时间:2019-12-03 14:06(GMT+08:00) 会议地点:108（前台后面大会议室）',
          'name': '李小双1',
          'date': '2019-09-11'
        },
        {
          'job': '乌石化烷基化装置试车钝化废酸实现国内首次回炼',
          'name': '李云',
          'date': '2019-09-11'
        },
        {
          'job': '辽阳石化首批低硫船用燃料油抢占市场',
          'name': '张雪',
          'date': '2019-11-11'
        },
        {
          'job': '全国通行+全国加油+全国优惠，中石油这张神卡你办了没有？',
          'name': '王强',
          'date': '2019-09-11'
        },
        {
          'job': '中国石油深入学习贯彻习近平总书记指示批示精神综述',
          'name': '刘三学',
          'date': '2019-12-11'
        }
      ],
      doneData: [
        {
          'job': 'lhtestlhtestlhtestlhtest2222 （正文:lhtestlhtestlhtestlhtest2222）',
          'date': '2019-08-11'
        },
        {
          'job': '李丽丽入职 （员工姓名:李丽丽）',
          'date': '2019-08-11'
        },
        {
          'job': '流程流转错误：用车申请-杨文元-2019-12-02',
          'date': '2018-09-11'
        },
        {
          'job': '关于加大城市管理建设方案',
          'date': '2018-09-11'
        },
        {
          'job': '新建合同范本流程-杨文元-2019-12-03',
          'date': '2018-01-13'
        }
      ],
      // 行业动态
      industryData: [
        {
          'name': '大港油田井下作业公司“小个头”带压封井节省60%工时',
          'date': '2019-12-04'
        },
        {
          'name': '测井公司自主研发装置解卡成功率100%',
          'date': '2019-12-04'
        },
        {
          'name': '新疆风城油田：扩容先导试验为储层“架桥建路”',
          'date': '2019-12-04'
        },
        {
          'name': '大港采油三厂小断块低渗油藏实现高效开发',
          'date': '2019-12-04'
        },
        {
          'name': '青海油泉子油田精细管理打开上产通道',
          'date': '2019-12-04'
        },
        {
          'name': '塔里木储层改造技术成提产“倍增器”',
          'date': '2019-12-04'
        }
      ],
      // 政策文档
      policyData: [
        {
          'name': '吐哈油田广发“英雄帖”比武纳士',
          'date': '2019-12-04'
        },
        {
          'name': '东方物探新兴物探开发处党员志愿服务凸显细和实',
          'date': '2019-12-04'
        },
        {
          'name': '煤层气公司忻州分公司列清单解难题',
          'date': '2019-12-04'
        },
        {
          'name': '新疆销售真改实改 主题教育向纵深推进',
          'date': '2019-12-04'
        },
        {
          'name': '测井公司“三个结合”推动主题教育有“形”有“行”',
          'date': '2019-12-04'
        },
        {
          'name': '青海油田突出“四个结合”筑牢基层堡垒',
          'date': '2019-12-04'
        }
      ],
      // 消息
      messageData: [
        {
          'job': '北京油气调控中心迎寒发力 互联互通年进气超21亿方',
          'date': '2019-12-02'
        },
        {
          'job': '自动审批流程走办',
          'date': '2019-05-16'
        },
        {
          'job': '项目工程新闻发布会',
          'date': '2019-05-18'
        }
      ],
      // 通知
      noticeData: [
        {
          'job': ' 中国石油梦想云创新大赛构建全联接智能油气田',
          'date': '2019-07-11'
        },
        {
          'job': '华东化工销售助力新型桶料走出国门',
          'date': '2019-07-16'
        },
        {
          'job': '协同工作报告',
          'date': '2019-07-16'
        }
      ],
      // 函件
      letters: [
        {
          'job': '塔里木加强市场管理红黄牌齐亮',
          'date': '2019-11-11'
        },
        {
          'job': '吐哈油田广发“英雄帖”比武纳士',
          'date': '2019-12-03'
        },
        {
          'job': '辽河油田电缆传输电动切割现场试验获成功',
          'date': '2019-11-11'
        }
      ],
      weekDate: ['日', '一', '二', '三', '四', '五', '六'][new Date().getDay()]
    }
  },
  computed: {
  },
  mounted () {
    this.initFont()
    this.$nextTick(function () {
      this.initEchart()
      this.initBar()
    })
  },
  methods: {
    $ (selector) {
      return Array.prototype.slice.call(document.querySelectorAll(selector))
    },
    initFont () {
      console.log('.mainBox', this.$('li'))
      let domArr = this.$('li')
      domArr.map(_ => {
        setTimeout(() => {
          _.style.translateY = '200px'
        }, 1000)
        _.style.opacity = '1'
      })
    },
    // 饼状图echart
    initEchart () {
      this.charts = echarts.init(document.getElementById('overall'))
      this.charts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          top: 10,
          data: ['', '', '']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                    fontSize: '20',
                    fontWeight: '100'
                }
              }
            },
            labelLine: {
              normal: {
                  show: false
              }
            },
            data: [
              {value: 335, name: '体系'},
              {value: 310, name: '政策'},
              {value: 234, name: '课题成果'}
            ]
          }
        ]
      })
    },
    // 柱状图echart
    initBar () {
      this.charts1 = echarts.init(document.getElementById('overall1'))
      let option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
                alignWithLabel: true
            }
          }
        ],
        yAxis: [{ type: 'value' }],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200]
          }
        ]
      }
      this.charts1.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    // 字体图标颜色控制
    i {
      color: #008FF5;
    }
    .main {
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
      // background: #F3F9FE;
    }
  }
  .home .left-main {
    width: 67%;
    .el-carousel__item {
      & > img {
        width: 100%;
        height: 100%;
        margin-bottom: 10px;
      }
    }
  }
  .home .header {
    width: 100%;
    height: 34px;
    font-size: 13px;
    color: rgb(51, 51, 51);
    font-family: '微软雅黑'!important;
    line-height: 34px;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
    & > i {
      display: inline-block;
      font-size: 20px;
      vertical-align: bottom;
      margin: 0 6px;
    }
  }
  .home .mainBox {
    border-radius: 4px;
    background: white;
    box-shadow: 1px 1px 1px #ebeef5;
    ul {
      margin-top: 4px;
      overflow-y: auto;
    }
    li {
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      padding-right: 14px;
      color: rgb(123, 122, 122);
      padding-left: 4px;
      font-family: '微软雅黑'!important;
      transition: all 1s;
      // opacity: 0;
      & > span {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap
      }
    }
    li:hover {
      color: #333;
      background: rgb(229,249,255);
    }
  }
  .home .footerBox {
    display: flex;
    justify-content: space-between;
    margin: 14px 0;
    & > div {
      width: 49%;
      display: inline-block;
      padding-bottom: 10px;
    }
    // & > div:first-child {
    //   margin-right: 5px;
    // }
    // & > div:last-child {
    //   margin-left: 5px;
    // }
    ul {
      height: 140px;
      padding: 4px;
    }
  }
  .home .right {
    width: 32%;
    .tools {
      display: flex;
      justify-content: space-around;
      .toolsBox {
        width: 25%;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        i {
          margin-top: 8px;
          font-size: 32px;
        }
        span {
          display: block;
          text-align: center;
          line-height: 34px;
          font-size: 12px;
          color: #242424;
        }
        span:hover {
          color: #409EFF;
        }
      }
      .toolsBox + .toolsBox {
        border-left: 1px solid #ccc;
      }
      .toolsBox:hover {
        background: #EEEEEF;
      }
    }
  }
  .home .eltabs {
    padding: 0 4px;
    height: 200px;
    .el-tabs__header {
      margin: 0 0 6px !important;
    }
    ul {
      height: 140px;
    }
    .el-tabs__content {
      height: calc(100% - 95px);
      overflow-y: auto;
    }
    li {
      & > span:first-child {
        width: 66%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      & > span:last-child {
        width: 30%;
        display: flex;
        justify-content: space-between;
      }
      span > span {
        display: inline-block;
      }
    }
  }
  .right .mainBox {
    margin-bottom: 14px;
  }
  .home .policy, .home .right {
    li {
      span:first-child {
        width: 65%
      }
      span:last-child {
        width: 28%;
        text-align: right;
      }
    }
  }
  .boxechart {
    background: white;
  }
  .message {
    span {
      float: right;
      margin-right: 6px;
      span {
        color: #409EFF;
        cursor: pointer;
        transition: all .3;
      }
      span:hover {
        text-decoration: underline;
      }
    }
  }
  .dateBox {
    background: white;
    width: 100%;
    background: #a22828;
    color: white;
    margin-bottom: 10px;
    border-radius: 4px;
    padding: 10px;
    & > div:first-child {
      font-size: 20px;
      color: #ddd;
    }
    & > div:last-child {
      font-size: 24px;
      color: #fff;
    }
  }
  .noticeList {
    min-height: 190px;
    ul {
      padding: 4px;
    }
  }
  .echartBar {
    display: inline-block;
    width: 49%;
  }
</style>
<style lang="scss">
  .home .eltabs .el-tabs__content {
    overflow-y: auto;
  }
  .home .eltabs .bage {
    background-color: #F56C6C;
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #FFF;
    margin-left: 6px;
  }
  .home .eltabs .el-tabs__header {
    margin: 0!important;
    padding-left: 4px;
  }
  .mainBox .el-badge__content {
    top: 5px;
    right: 26px;
    z-index: 1;
  }
</style>
